<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  
	<meta http-equiv=Content-Type content="text/html;charset=utf-8">
	<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
	<meta content=always name=referrer>
	<title>OpenLayers 3地图示例</title>
	<link href="../ol3.13.1/ol.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="../ol3.13.1/ol.js" charset="utf-8"></script>
</head>

<body>
	<div id="map" style="width: 100%, height: 400px"></div>
	<div id="navigate-container">
		<input type="button" onClick="moveToLeft();" value="左移" />
		<input type="button" onClick="moveToRight();" value="右移" />
		<input type="button" onClick="moveToUp();" value="上移" />
		<input type="button" onClick="moveToDown();" value="下移" />
		<input type="button" onClick="moveToChengDu();" value="移到成都" />
		
		<input type="button" onClick="zoomIn();" value="放大" />
		<input type="button" onClick="zoomOut();" value="缩小" />
	</div>
	<script>
	  var map = new ol.Map({
			layers: [
				new ol.layer.Tile({source: new ol.source.OSM()})
			],
			view: new ol.View({
				// 设置成都为地图中心，此处进行坐标转换， 把EPSG:4326的坐标，转换为EPSG:3857坐标，因为ol默认使用的是EPSG:3857坐标
				// 请阅读“地图坐标系”了解更多坐标系的信息。
				center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
				zoom: 10
			}),
			target: 'map'
	  });
		
		// 向左移动地图
		function moveToLeft() {
			var view = map.getView();
			var mapCenter = view.getCenter();
			// 让地图中心的x值增加，即可使得地图向左移动，增加的值根据效果可自由设定
			mapCenter[0] += 50000;
			view.setCenter(mapCenter);
			map.render();
		}
		
		// 向右移动地图
		function moveToRight() {
			var view = map.getView();
			var mapCenter = view.getCenter();
			// 让地图中心的x值减少，即可使得地图向右移动，减少的值根据效果可自由设定
			mapCenter[0] -= 50000;
			view.setCenter(mapCenter);
			map.render();
		}
		
		// 向上移动地图
		function moveToUp() {
			var view = map.getView();
			var mapCenter = view.getCenter();
			// 让地图中心的y值减少，即可使得地图向上移动，减少的值根据效果可自由设定
			mapCenter[1] -= 50000;
			view.setCenter(mapCenter);
			map.render();
		}
		
		// 向下移动地图
		function moveToDown() {
			var view = map.getView();
			var mapCenter = view.getCenter();
			// 让地图中心的y值增加，即可使得地图向下移动，增加的值根据效果可自由设定
			mapCenter[1] += 50000;
			view.setCenter(mapCenter);
			map.render();
		}
		
		// 移动到成都
		function moveToChengDu() {
			var view = map.getView();
			// 设置地图中心为成都的坐标，即可让地图移动到成都
			view.setCenter(ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'));
			map.render();
		}
		
		// 放大地图
		function zoomIn() {
			var view = map.getView();
			// 让地图的zoom增加1，从而实现地图放大
			view.setZoom(view.getZoom() + 1);
		}
		
		// 缩小地图
		function zoomOut() {
			var view = map.getView();
			// 让地图的zoom减小1，从而实现地图缩小
			view.setZoom(view.getZoom() - 1);
		}
		
	</script>
</body>
	
</html>